<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>TM Lib</title>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        
        <link rel="stylesheet" href="./style.css" type="text/css" /> 
        <script type="text/javascript" src="./script.js"></script>
        
    </head>
    
    <body>
        
        <header id="header">
            <h1>TM Editor</h1>
            <p>
                HTML5 の Web Storage API と File API を使って作った Editor です.
            </p>
        </header>
        
        <div id="main">
            <aside id="sidebar">
                <h2>File List</h2>
                <select size="8" id="file-list"></select>
                <button id="open">Open</button>
                <button id="delete">Delete</button>
                <button id="rename">Rename</button>
            </aside>
            
            <section id="content">
                <h2>Editor</h2>
                <div id="file-header-list">
                    <div class="file-header">
                        <div class="file-name">Untitled</div>
                        <div class="file-edited">*</div>
                        <div class="file-close">x</div>
                    </div>
                    <div class="file-header">
                        <div class="file-name">Untitled</div>
                        <div class="file-edited">*</div>
                        <div class="file-close">x</div>
                    </div>
                    <div class="file-header">
                        <div class="file-name">Untitled</div>
                        <div class="file-edited">*</div>
                        <div class="file-close">x</div>
                    </div>
                </div>
                <textarea id="main-ta" rows="32" cols="80" wrap="off"></textarea>
                
                <footer style="text-align:right">
                    <button id="save">Save</button>
                    <button id="clear">Clear</button>
                    <button id="download">Download</button>
                    <br />
                    <label>Import : <input id="import" type="file" /></label>
                    <br />
                    <button id="export">Export</button>
                </footer>
            </section>
        </div>
        
        <footer id="footer">
            <p><a href="#">Home</a></p>
        </footer>
        
        <ul>
            Memo
            <li>テキストエリアの縁の色は名前タブに合わせて変わるようにする</li>
            <li>ローカルストレージ用のキーに'.'から始まるものは予約(設定情報や.temp)などにしておく. つまり'.'から始まるようなファイル名は禁止する.</li>
        </ul>
        
    </body>
</html>
